import React, {Component} from 'react';
import TheFunnelChart from "../../../../components/TheFunnelChart";
import '../../style/style.less'
import {Empty, Tooltip} from "antd";
import {QuestionCircleOutlined} from '@ant-design/icons'

class Funnel extends Component {
    state = {
        dataSource: {}
    }

    async componentDidMount() {
        await this.getData()
    }

    async componentDidUpdate(prevProps, prevState, snapshot) {
        const preDateType = prevProps.dateType;
        const {dateType} = this.props;
        if (preDateType !== dateType) {
            await this.getData()
        }
    }

    getData = async () => {
        const {dateType} = this.props
        this.setState({
            dataSource: {}
        })
        const response = await React.$get(`/admin/admin/auth/rate?dateType=${dateType}`)
        this.setState({
            dataSource: response.data
        })
    }

    render() {
        const {dataSource} = this.state
        const {dataSource: {title, tip, dateBegin, dateEnd, time, val, valUnit, hb, tb, combined, combinedUnit, mean, meanUnit}} = this.state
        return (
            <>
                {
                    dataSource && <div className={'plus-chart-funnel'}>
                        <div className={'funnel-header'}>
                            <div className={'funnel-header-title'}>
                                <div>
                                    <span className={'title'}>{title}</span>
                                    <Tooltip title={tip}>
                                        <QuestionCircleOutlined/>
                                    </Tooltip>
                                </div>
                                <span className={'date'}>{time}</span>
                            </div>
                            <div className={'funnel-content'}>
                                <div>总体转化率 <span className={'funnel-val'}>{val || 0}</span><span>{valUnit}</span></div>
                            </div>
                        </div>
                        {
                            dataSource.lineargroup && dataSource.lineargroup.length > 0 ?
                                <TheFunnelChart linearGroup={dataSource.lineargroup}/> :
                                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
                        }
                    </div>
                }
            </>
        );
    }
}

export default Funnel;